<template>
  <div>
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button>其它</el-button>
    </div>
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder=" 请 输 入 关 键 字 " style="width:
30%"></el-input>
      <el-button style="margin-left: 10px" type="primary" @click="list">查询</el-button>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column sortable prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="家居名"></el-table-column>
      <el-table-column prop="maker" label="制造商"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="sales" label="销量"></el-table-column>
      <el-table-column prop="stock" label="库存"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
          <el-button  type="text"><el-popconfirm title="你确定要删除吗？" @confirm="deleteItem(scope.row.id)">
            <template #reference>
              <el-button link type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="家居名" prop="name">
          <el-input v-model="form.name" style="width: 50%"></el-input>
          {{serverValidErrors.name}}
        </el-form-item>
        <el-form-item label="厂商" prop="maker">
          <el-input v-model="form.maker" style="width: 50%"></el-input>
          {{serverValidErrors.maker}}
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="form.price" style="width: 50%"></el-input>
          {{serverValidErrors.price}}
        </el-form-item>
        <el-form-item label="销量" prop="sales">
          <el-input v-model="form.sales" style="width: 50%"></el-input>
          {{serverValidErrors.sales}}
        </el-form-item>
        <el-form-item label="库存" prop="stock">
          <el-input v-model="form.stock" style="width: 50%"></el-input>
          {{serverValidErrors.stock}}
        </el-form-item>
      </el-form>
      <template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
      </template>
    </el-dialog>
    <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2,5,10,15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>

import request from "@/utils/request";

export default {
  name: 'HomeView',
  components: {},
  data() {
    return {
      serverValidErrors:{},
      pageSize:5,
      currentPage:1,
      total:10,
      form: {},
      search: '',
      dialogVisible: false,
      tableData: [],
      rules: {
        name: [
          {required: true, message:"家居名不能为空", trigger: "blur"},
          {min: 3, max: 6, message: "家居名长度在3~6字符之间"}],
        maker: [{required: true, message:"制造商不能为空", trigger: "blur"}],
        price: [{required: true, message:"价格不能为空", trigger: "blur"},
          {pattern:/^(([1-9]\d*)|0)(\.\d+)?$/, message: "请输入数字" ,rigger: "blur"}],
        sales: [{required: true, message:"销量不能为空", trigger: "blur"},
          {pattern:/^([1-9]\d*)|0$/, message: "请输入数字" ,rigger: "blur"}],
        stock: [{required: true, message:"库存不能为空", trigger: "blur"},
          {pattern:/^([1-9]\d*)|0$/, message: "请输入数字" ,rigger: "blur"}]
      },
    }
  },
  methods: {
    save() {
      if(this.form.id){
        request.post("/api/update",this.form).then(res => {
          console.log("res => ", res);
          if(res.code === "200"){
            this.$message({
              type : "success",
              message : "更新成功"
            })
          }
          this.dialogVisible = false;
          this.list();
        })
      }else {
        this.$refs['form'].validate(valid => {
          // valid = true;
          if(valid){
            request.post("/api/save", this.form).then(res => {
              console.log("res => ", res);
              if(res.code === "200"){
                this.$message({
                  type : "success",
                  message : "添加成功"
                },
                this.dialogVisible = false)
              }else if(res.code === "400"){
                this.serverValidErrors.name = res.data.name;
                this.serverValidErrors.maker = res.data.maker;
                this.serverValidErrors.price = res.data.price;
                this.serverValidErrors.sales = res.data.sales;
                this.serverValidErrors.stock = res.data.stock;
              }

              this.list();
            })
          }else {
            this.$message({
              type:"error",
              message:"验证失败， 不提交"
            })
            return false;
          }
        })

      }

    },
    list() {
      // request.get("/api/list").then(res => {
      //   console.log("res => ", res);
      //   this.tableData = res.data;
      // })
      request.get("/api/fuzzy",{params:{
          search: this.search,
          pageSize : this.pageSize,
          pageNo: this.currentPage
        }}).then(res => {
          this.tableData = res.data.records;
          this.total = res.data.total;
      })
    },
    add() {
      this.dialogVisible = true;
      this.form = {};
      this.$refs['form'].resetFields()
      this.serverValidErrors = {}
    },
    deleteItem(id){
      request.get("/api/delete/"+id).then(res => {
        this.list();
      })
    },
    // handleEdit(row) {
    //   var json = JSON.parse(JSON.stringify(row));
    //   this.dialogVisible = true;
    //   this.form = json;
    // },
    handleEdit(row) {
      request.get("/api/selectOne/" + row.id).then(res => {
        this.form = res.data;
        this.dialogVisible = true;
      })
    },
    handlePageSizeChange(pageSize){
      // console.log("pageSize", pageSize)
      this.pageSize = pageSize;
      this.list();

    },
    handleCurrentChange(pageNo){
      // console.log("pageNo", pageNo)
      this.currentPage = pageNo;
      this.list();
    }
  },
  created() {
    this.list();
  }
}
</script>
